<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../../plugins/bootstrap-5.1.3-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <script src="../../../plugins/bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js" ></script>
    <script src="../js/tag/tag.js" ></script>
    <script src="../../../plugins/js/request.js"></script>
    <title>Document</title>
    <style>

    </style>
</head>
<body>

    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg opacity-75  " >
        <div class="container-sm  ">
          <a class="navbar-brand text-lg" href="#">Blog</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse " id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item a">
                      <a class="nav-link active "  aria-current="page" href="blogs.html">  <i class="bi bi-house-door"></i> 博客</a>
                  </li>
                  <li class="nav-item a">
                      <a class="nav-link" href="type.html"><i class="bi bi-lightbulb"></i>分类</a>
                  </li>

                  <li class="nav-item a">
                      <a class="nav-link " href="tags.html"> <i class="bi bi-bookmarks"></i>标签</a>
                  </li>
              </ul>
           <div class="m-magen-tiny a " >
             <a href="#" style="text-decoration:none;" class="denglu-pp">

                 <img src="../image/2003390.jpg" class="rounded-circle imgg-tiny" alt="...">
                <span class="" >45</span>
             </a>
           
           </div>
          </div>
        </div>
      </nav>

      <!-- 中间内容 -->
    <div class="m-container-small con-padding-top">
      <div class="alert alert-success" role="alert">
        A simple success alert—check it out!
      </div>
      <div id="tag">
        <table class="table table-bordered h-padding-b f-bg rounded">
        <thead>
          <tr>
            <th ></th>
            <th>名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tag">
              <th scope="row" >{{index+1}}</th>
              <th style="display: none" >{{item.id}}</th>
            <th>{{item.name}}</th>
            <th>
              <button type="button" class="btn btn-success btn-sm1" @click="edit(item.id)">编辑</button>
              <button type="button" class="btn btn-danger btn-sm1">删除</button>
            </th>
          </tr>
        </tbody>
      </table>
      <div class="f-bg rounded-bottom">
        <div class="row">
          <div class="col-6">
            <nav aria-label="Page navigation example ">
              <ul class="pagination h-padding-b m-padding-sm ">
                <li class="page-item ">
                  <a class="page-link" href="#" aria-label="Previous"  @click="handleCurrentChange(page-1)">
                    <span aria-hidden="true">上一页</span>
                  </a>
                </li>
              
                <li class="page-item">
                  <a class="page-link" href="#" aria-label="Next"  @click="handleCurrentChange(page+1)">
                    <span aria-hidden="true">下一页</span>
                  </a>
                </li>
              </ul>
            </nav>
          </div>
          <div class="col-6 text-end">
              <button type="button" class="btn btn-success  m-padding-sm " @click="add()">新增</button>
          </div>
        </div>
      </div>
      </div> 
    </div>
    
    <br><br><br><br><br><br><br><br><br><br><br>
    <div class="container-fluid f-bg sticky-bottom " style="padding-top: 40px;">
      <div class="row clearfix">
          <div class="col-md-12 column">
              <div class="jumbotron">
                  <div class="container">
                      <center>
  
                          <p>Copyright© 2020 All Rights Reserved. </p>
                          <p>试做</p>
                          地址：航空港校区（主校区） &nbsp;&nbsp;&nbsp; 电话:8956584
                          
                      </center>
  
                  </div>
              </div>
          </div>
      </div>
  </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script>
       new Vue({
           el:"#tag",
           data() {
               return {
                   id:'',
                   page: 1,
                   pageSize: 5,
                   tag:[],

                   // addOrUpdate:'add',

               }
           },
           created(){
               // this.id=requestUrlParam('id')
               //
               //
               // if(this.id){
               //     this.addOrUpdate='update'
               //     this.tag.id=this.id
               //     this.init()
               // }
               this.init()
           },
           methods:{
               //aixos 会返回一个Promise对象
               //async 和 await 基于 promise 的。
               //   使用 async 的函数将会始终返回一个 promise 对象
               //   await 关键字只能放到async 函数里面
               async init() {
                   const params = {
                       page: this.page,
                       pageSize: this.pageSize,

                   }
                   console.log(params)
                   await getTag(params).then(res => {
                       if (String(res.data.code) === '1') {
                            this.tag=res.data.data.records
                           console.log(this.tag)
                       }

                   }).catch(err => {
                       alert("cuowu")
                   })
               },

               handleCurrentChange(val) {
                   this.page = val
                   this.init()
               },

               add(){
                   window.location.href="../pages/tags-input.html"
               },
               edit(id){
                   window.location.href="/templates/backed/pages/tags-input.html?id="+id
               },

           },

       })

   </script>
</body>
</html>